<template>
  <!-- <div class="box">
    <h1>props:我是父组件曹操</h1>
    <h1>refFlag : {{ refFlag }}</h1>
    <button @click="money++">money++</button>
    <hr />
    <Child info="我是曹操" :money="money" :refFlag="refFlag"></Child>
    
  </div> -->
  <div style="margin-top: 10px;">---------------PropTest 分隔符------------------</div>
    <NeighbourA ref="NeighbourAcompRef"></NeighbourA>
    <div style="height: 100px;margin-top: 50px;">------xxxxxxxxxxxxxx----------</div>
    <NeighbourB :neighbourAcompRef="NeighbourAcompRef" :fatherRef="fatherRef"></NeighbourB>

    <br>
    <button @click="fatherRefIncrease">fatherRef++</button>
    <!-- <NeighbourC></NeighbourC> -->
     <computedDemo1></computedDemo1>
</template>

<script setup lang="ts">
//props:可以实现父子组件通信,props数据还是只读的！！！
import Child from "./Child.vue";
import { ref } from "vue";
import NeighbourA from './NeighbourA.vue'
import NeighbourB from './NeighbourB.vue'
import NeighbourC from './NeighbourC.vue'
import computedDemo1 from './computedDemo1.vue'
let money = ref(10000);
let refFlag=ref(true);

const fatherRef=ref({count:1000})

function fatherRefIncrease(){
  fatherRef.value.count++;
}

const NeighbourAcompRef=ref({});
</script>

<style scoped>
.box {
  width: 100vw;
  height: 600px;
  background: yellowgreen;
}
</style>